import { useReducer, useState } from 'react'

const NewTodoApp = () => {
  const reducer = (state, action) => {
    switch (action.type) {
      case 'add':
        const todo = { id: action.payload.id, text: action.payload.text, completed: false }
        return { ...state, todos: [...state.todos, todo] }
      case 'remove':
        return { ...state, todos: state.todos.filter((item) => item.id !== action.payload) }
      case 'toggle':
        const todoIndex = state.todos.findIndex((todo) => todo.id === action.payload)
        const newTodo = { ...state.todos[todoIndex], status: !state.todos[todoIndex].status }
        return { ...state, todos: [...state.todos.slice(0, todoIndex), newTodo, ...state.todos.slice(todoIndex + 1)] }
      case 'filter':
        console.log(action.payload)
        return { ...state, filter: action.payload }
      default:
        return state
    }
  }
  const isState = {
    todos: [
      { id: '1', text: '起床吃饭', status: true },
      { id: '2', text: '晚上要刷牙', status: false },
    ],
    filter: 'all',
  }
  const makeId = () => Math.random().toString(36).substr(-8)
  const [state, dispatch] = useReducer(reducer, isState)
  const [currentAction, setCurrentAction] = useState(0)
  const visibleTodos = state.todos.filter((item) => {
    switch (state.filter) {
      case 'active':
        return !item.status
      case 'completed':
        return item.status
      case 'all':
      default:
        return item
    }
  })
  const handleLink = (e, item, index) => {
    e.preventDefault()
    dispatch({ type: 'filter', payload: item.txt })
    const newCurrentAction = index
    setCurrentAction(newCurrentAction)
  }
  return (
    <div>
      <h2>待办事务清单</h2>
      <form
        onSubmit={(e) => {
          e.preventDefault()
          const text = e.target.text.value.trim()
          if (text.length > 0) {
            dispatch({ type: 'add', payload: { id: makeId(), text } })
          }
        }}
      >
        <input name="text" type="text" />
        <button>添加</button>
      </form>
      <ul>
        {visibleTodos.map((item) => (
          <li key={item.id}>
            <span
              style={{ textDecoration: item.status ? 'line-through' : ' none' }}
              onClick={() => {
                dispatch({ type: 'toggle', payload: item.id })
              }}
            >
              {item.text}
              {'  '}
              <button
                onClick={() => {
                  dispatch({ type: 'remove', payload: item.id })
                }}
              >
                ❌
              </button>
            </span>
          </li>
        ))}
      </ul>
      <div>
        {[
          { name: '全部', txt: 'all' },
          { name: '已完成', txt: 'completed' },
          { name: '未完成', txt: 'active' },
        ].map((item, index) => (
          <span key={item.name}>
            <a href="" style={{ color: currentAction === index ? 'red' : 'blue' }} onClick={(e) => handleLink(e, item, index)}>
              {item.name}
            </a>
            {'   '}
          </span>
        ))}
      </div>
    </div>
  )
}

export default NewTodoApp
